<template>
  <view class="index-page">
    <CustomNavbar />

    <CustomContainer>
      <CustomCard
        :iconUrl="cardHeadIcon"
        title="关键指标"
      >
        <CustomGrid :list="indicatorList" :border="true" />
      </CustomCard>

      <CustomCard
        :iconUrl="cardHeadIcon"
        title="节能分析"
      >
        <CustomGrid :list="energySavingList" />
      </CustomCard>
    </CustomContainer>

    <CustomContainer>
      <CustomCard
        :iconUrl="cardHeadIcon"
        title="我的收藏"
      >
        <up-list height="auto">
          <view class="project-list-title project-list-item">
            <text class="column1">序号</text>
            <text class="column2">项目名称</text>
            <text class="column3">责任人</text>
            <text class="column4">电话</text>
          </view>
          <ProjectListItem
            v-for="(item, index) in collectProjectList"
            :key="`device${index}`"
            :projectItem="item"
          >
            <view class="project-list-item">
              <text class="column1">{{ item.id }}</text>
              <text class="column2">{{ item.name }}</text>
              <text class="column3">{{ item.admin }}</text>
              <text class="column4">{{ item.phone }}</text>
            </view>
          </ProjectListItem>
        </up-list>
      </CustomCard>
      <up-gap height="24rpx"></up-gap>
    </CustomContainer>
    <up-gap height="1rpx"></up-gap>

    <CustomFloatBtn />
  </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useUserStore } from '@/store/user';
import { wxLogin } from '@/api/user';
import { useProjectStore } from '@/store/project';
import CustomNavbar from './CustomNavbar.vue';
import CustomFloatBtn from '@/components/common/CustomFloatBtn/CustomFloatBtn.vue';
import CustomIndicator from '@/components/common/CustomIndicator/CustomIndicator.vue';
import CustomContainer from '@/components/common/CustomContainer/CustomContainer.vue';
import CustomCard from '@/components/common/CustomCard/CustomCard.vue';
import CustomGrid from '@/components/common/CustomGrid/CustomGrid.vue';
import ProjectListItem from '@/components/project/ProjectListComp/ProjectListItem.vue';
import cardHeadIcon from '@/static/image/setting.png'
import { IDeviceItem } from '@/types/deviceType';

const datePickerShow = ref(false);
const isLoadingPageShow = ref(false);

const imgSrc = ref('');
const title = ref('Hello');
const mypopup = ref(null);
const userStore = useUserStore();
const name = 'guang';
const fn = () => {
  name.split('').map((item) => {
    return item;
  });
};
 
const indicatorList = reactive([  
    {  
        name: '设备总数',  
        number: '62345'  
    },  
    {  
        name: '故障率',  
        number: '10%'  
    },  
    {  
        name: '累计用电(kWh)',  
        number: '15408.25'  
    },  
    {  
        name: '累计用水(t)',  
        number: '345'  
    },  
    {  
        name: '节能率',  
        number: '75.25%'  
    },  
    {  
        name: '累计节电(kWh)', 
        number: '76.25'  
    },  
]);  

const energySavingList = reactive([  
    {  
        name: '节能(万kWh)',  
        number: '25.02'  
    },  
    {  
        name: '环比',  
        number: '0.25%',
        icon: 'up',
    },  
    {  
        name: '同比',  
        number: '0.3%',
        icon: 'down',
    },    
]);  

onMounted(() => {
  console.log('index onMounted', userStore.userInfo ? '2' : 3);
});

const toSetting = () => {
  uni.navigateTo({
    url: '/pages/my/my',
  });
};

const open = () => {
  console.log('popup', mypopup);
  // mypopup.open('top')
};

const getUserInfo = () => {
  console.log('getUserInfo1', userStore.userInfo?.name);
};

const login = () => {
  const data = {
    phone: 'cdn_baoli01',
    password: 'bl.123.cdn',
    company_id: 6,
  };
  console.log('login data:', data);
  wxLogin(data).then((res) => {
    console.log('login res', res);
  });
};

const projectStore = useProjectStore();
const collectProjectList = reactive([
  { id: 1, name: '项目1', admin: '张三1', phone: '13888888888' },
  { id: 2, name: '项目2', admin: '张三2', phone: '13888888888' },
  { id: 3, name: '项目3', admin: '张三3', phone: '13888888888' },
  { id: 4, name: '项目4', admin: '张三4', phone: '13888888888' },
  { id: 5, name: '项目5', admin: '张三5', phone: '13888888888' },
  { id: 6, name: '项目6', admin: '张三6', phone: '13888888888' },
  { id: 7, name: '项目7', admin: '张三7', phone: '13888888888' },
  { id: 7, name: '项目7', admin: '张三7', phone: '13888888888' },
  { id: 7, name: '项目7', admin: '张三7', phone: '13888888888' },
  { id: 7, name: '项目7', admin: '张三7', phone: '13888888888' },
])
const getProjectList = () => {
  console.log('getProjectList', projectStore.projectList && projectStore.projectList[0]);
}
</script>

<style lang="scss" scoped>
.index-page {
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
}

.project-list-title {
  font-weight: bold;
}
.project-list-item {
  display: flex;
  flex-direction: row;
  font-size: 28rpx;
  line-height: 40rpx;
  padding-bottom: 8rpx;
  padding-top: 32rpx;
  color: $uni-text-color;
  border-bottom: 1rpx solid $uni-border-color;

  .column1 {
    flex: 1;
  }
  .column2 {
    flex: 3;
  }
  .column3 {
    flex: 2;
  }
  .column4 {
    flex: 3;
  }
}
// :deep(.custom-container) {
//   background: #ff0000;
// }
</style>
